<template>
    <img :src="currentSong?.al?.picUrl" class="bg-img">
    <div class="detail-box">
        <div class="detail-top">
            <div class="detail-top-left">
                <van-icon name="arrow-down" color="white" size="0.5rem" @click="handleDetailClose" />
            </div>
            <div class="detail-top-center" >
                <span class="title">
                    <Vue3Marquee >
                    {{ currentSong?.al?.name }}
                    </Vue3Marquee>
                </span>
                <span class="author">
                    {{ handleAr(currentSong.ar) }}
                </span>
            </div>
            <div class="detail-top-right">
                <van-icon name="share-o" size="0.5rem" />
            </div>
        </div>
        <div class="detail-center" v-show="isLyricShow==false" @click="handleLyric">
            <img src="@/assets/needle.png" :class="isPlaying?'needle-active':'needle'">
            <img src="@/assets/music-border.png" class="border-img">
            <img :src="currentSong?.al?.picUrl" class="img-content" :class="isPlaying?'img-content-active':'img-content-paused'">
        </div>
        <div class="detail-center" ref="lyricRef" v-show="isLyricShow==true" @click="handleLyric" style="margin-top:1rem ;height: 10rem;">
            <p v-for="(item,index) in lyricList" :key="index" style="font-size: 0.3rem; margin-top:0.2rem; color: rgb(190, 181, 181);" :class="handleHighLight(item,index)">
            <!-- {hlactive:(item.totalMill<=currentPlayTime&&item.pre>currentPlayTime)} -->
            {{item.lrc}}
            </p>
        </div>
        <div class="detail-bottom">
            <div class="detail-bottom-top">
                <van-icon name="like-o" size="0.5rem" />
                <van-icon name="down"  size="0.5rem"/>
                <van-icon name="comment-o" size="0.5rem" />
                <van-icon name="ellipsis"  size="0.5rem"/>
            </div>
            <div class="detail-bottom-center">
               <input type="range" class="range-step" min="0" :max="durationTime" :value="currentPlayTime" :onchange="handleChangeStep">
            </div>
            <div class="detail-bottom-bottom">
                <van-icon name="replay" size="0.5rem"/>
                <van-icon name="arrow-left" size="0.5rem" @click="handleLastSong"/>
                <van-icon v-if="isPlaying==false" name="play-circle-o" size="0.8rem" @click="insidePlay"/>
                <van-icon v-else name="pause-circle-o" size="0.8rem"  @click="insidePlay"/>
                
                <van-icon name="arrow"  size="0.5rem" @click="handleNextSong"/>
                <van-icon name="todo-list-o"  size="0.5rem"/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">import { defineComponent, onMounted,computed,ref,reactive,toRefs ,watch} from "vue";
import { handleAr } from "@/utils/utils.js"
import { Vue3Marquee } from "vue3-marquee"
import {useStore} from "vuex"
import {getLyric} from "@/utils/api.js"
import 'vue3-marquee/dist/style.css'
export default defineComponent({
    props: ["currentSong","durationTime"],
    emits:["playMusic","updateAudio"],
    components: {
        Vue3Marquee
    },
    setup(props,{emit}) {
        // const state=reactive({
        //   lyricList:[]
        // })
        const durationTime=ref((props.durationTime))
        console.log("我接收到的时长",(durationTime.value))
        const lyricRef=ref(null)
       const store=useStore()
       const isLyricShow=ref(false)
       const handleLyric=()=>{
        isLyricShow.value=!isLyricShow.value
       }
       watch(durationTime,(newV,oldV)=>{
console.log("总时长已经改变",newV,oldV)
       })
       const handleChangeStep=(e)=>{
        emit("updateAudio",[parseInt(e.target.value)])
        // store.commit("changePlayTime",parseInt(e.target.value))
        
       }
      const handleHighLight=computed(()=>(item,index)=>{
        if((index!==(lyricList.value.length-1))&&item.totalMill<=store.state.currentPlayTime&&lyricList.value[index+1].totalMill>store.state.currentPlayTime){
           
            // console.log(1)
            console.log(item)
            return 'hlactive'     
        }
        else if(index==lyricList.value.length-1){
            if(store.state.currentPlayTime>=item.totalMill){
                return 'hlactive'
            }else{
                return ''
            }        
        }
        else{
            return ''
        }
      })
    const currentPlayTime=computed(()=>store.state.currentPlayTime)
        const currentLyric=computed(()=>store.state.currentLyric)
        const lyricList=computed(()=>{
            
          const array=currentLyric.value.lyric.split("\n").map(item=>{
            let min=item.slice(1,3)
            let sec=item.slice(4,6)
            let mill=item.slice(7,10)
            let lrc=item.slice(11,item.length)
            if(isNaN(Number(mill))){
                mill=item.slice(7,9)
                lrc=item.slice(10,item.length)            
                }
                let totalMill=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill)
                return {min,sec,mill,lrc,totalMill}
        })
        array.pop()
       const arrayTemp= array.map((item,index)=>{
      
            if(index===array.length-1){
                item.pre=0

            }else{
                item.pre=array[index+1]?.totalMill
            }
            return item
        })
        console.log(arrayTemp)
        return arrayTemp

        })
       
       const handleLastSong=()=>{
        lyricRef.value.scrollTop=0
        console.log(lyricRef.value.scrollTop)
        console.log("上一首")
        store.commit("changePlaySong",-1)
       }
       const handleNextSong=()=>{
        lyricRef.value.scrollTop=0
        console.log(lyricRef.value.scrollTop)
        console.log("下一首")
        store.commit("changePlaySong",1)
       }
       const playListIndex=computed(()=>store.state.playListIndex)
       const playList=computed(()=>store.state.playList)
        watch(currentPlayTime,(newV,oldV)=>{
           let p:any= document.querySelector("p.hlactive")
        //    console.log([p])
           console.log((document.documentElement.clientHeight)/2-170)
           if(p&&p.offsetTop>(document.documentElement.clientHeight)/2-170){
           
            let offset=p?.offsetTop-((document.documentElement.clientHeight)/2-170)
            
            // console.log(offset)
            console.log(p.offsetTop)
            lyricRef.value.scrollTop=offset 
            if(newV==parseInt(durationTime.value.toFixed(0))) {
                if(playListIndex.value==playList.value.length-1)
                {
                store.commit("changePlaySong",0)
                }
                else{
                store.commit("changePlaySong",playListIndex.value+1)
                }
               
            }         
            }
        })
        function handleDetailClose(){
            store.commit("changeDetailShow")
        }
        function insidePlay(){
            emit("playMusic")
        }
        // async function getCurrentLyric(){
        //     const response=await getLyric({id:id})
        //     console.log(response)
        // }
        // getCurrentLyric()
        let isPlaying=computed(()=>store.state.isPlaying)
        onMounted(() => {
            console.log(props.currentSong)
        })
        return {
            handleAr,
            handleDetailClose,
            isPlaying,
            insidePlay,
            isLyricShow,
            handleLyric,
            currentLyric,
            lyricList,
            currentPlayTime,
            handleHighLight,
            lyricRef,
            handleLastSong,
            handleNextSong,
            handleChangeStep,
            durationTime
        };
    },
});
</script>

<style lang="less" scoped>

.bg-img {
    width: 100%;
    height: 100%;
    filter: blur(30px);
    position: absolute;
    z-index: -1;
}

.detail-box {
    padding: 0.3rem;
    height: 93%;
    position: relative;
    text-align: center;
    .detail-top {
       
        display: flex;
        flex-wrap: nowrap;
        // gap: 1.7rem;
        align-items: center;
        justify-content: center;
        color: #fff;
        position: relative;
        .detail-top-left {
            position: absolute;
            top: 0.2rem;
            left:0.2rem;
            
           
        }
        .detail-top-center{
            width: 3rem;
            text-align: center;
            .title{
                font-size: 0.4rem;
            }
            .author{
                text-align: center;
                display: inline-block;
                width: 80%;
                font-size: smaller;
                color: gray;
                overflow: hidden;
                white-space: nowrap;
               text-overflow: ellipsis;
            //    z-index: 999;
            }
        }
        .detail-top-right{
             position: absolute;
            top: 0.2rem;
            right:0.2rem;
        }
    }
    .detail-center{
        width: 100%;
        height: 9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        position: relative;
        // overflow: hidden;
        overflow: scroll;
        .hlactive{
    color: #fff !important;
    font-size: larger !important;
}
        .needle{
            width:2rem;
            height:3rem;
            position:absolute;
            top:1.1rem;
            left: 3rem;
            
            transform-origin: 0 0;
            transform: rotate(-10deg);
            transition: all 2s;
        }

        .needle-active{
            width:2rem;
            height:3rem;
            position:absolute;
            top:1.1rem;
            left: 3rem;
            
            transform-origin: 0 0;
            transform: rotate(0deg);
            transition: all 2s;
        }
        .border-img{
          

            width:5rem;
            height:5rem;
            position: absolute;
            bottom: 1rem;
            z-index: -1;
        }
        .img-content{
            width: 3.15rem;
            height: 3.15rem;
            position: absolute;
            border-radius: 50%;
            bottom: 1.93rem;
             animation: rotate_img 10s linear infinite;
        }
        .img-content-active{
           
           animation-play-state: running
        }
        .img-content-paused{
            animation-play-state: paused;
        }
        @keyframes rotate_img{
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);

            }
        }

    }
    .detail-bottom{
        color: #fff;
       width: 95%;
       height: 2rem;
       position: absolute;
       bottom: 0.2rem;
       .detail-bottom-top{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        height: 0.6rem;
       }
       .detail-bottom-center{
       height: 0.5rem;
       margin-top: 0.2rem;
       .range-step{
        width: 100%;
        height:0.2rem
       }
       }
       .detail-bottom-bottom{
        height: 0.5rem;
       margin-top: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;

       }
    }
    

}
</style>